import { createVNode, defineComponent, isVNode } from '@vue/runtime-core'
import { computed, resolveComponent } from 'vue'
import { isString } from '@vue/shared'

const COMPONENT_NAME = 'PTIcon'

/**
 * 完成element的icon支持
 * TODO 需要添加Awe 和 local的项目支持， 以及自定义引入的情况下的支持
 */
export default defineComponent({
    name: COMPONENT_NAME,
    props: {
        name: {
            type: [String],
            required: false,
        },
        size: {
            type: [String, Number],
            required: false,
            default: () => 14,
        },
        color: {
            type: String,
            required: false,
            default: () => undefined,
        },
    },
    setup(props) {
        const { name } = props
        if (name === '' || name === null || name === undefined) {
            return () => ''
        }
        const iconStyle = computed(() => {
            if (!props.size && !props.color) return {}
            let { size, color } = props
            size = isString(size) ? `${size.replace('px', '')}px` : `${size}px`

            return {
                fontSize: size,
                color: color,
            }
        })

        const iconName = computed(() => {
            return props.name!.replace('pt-', '').replace('ele-', '')
        })

        if (isVNode(props.name)) {
            return () =>
                createVNode(resolveComponent('el-icon'), { style: iconStyle.value }, () => createVNode(props.name!))
        }

        if (props.name!.indexOf('pt-') === 0 || props.name!.indexOf('ele-') === 0) {
            return () =>
                createVNode(resolveComponent('el-icon'), { style: iconStyle.value }, () =>
                    createVNode(resolveComponent(iconName.value)),
                )
        }

        return () => createVNode('i', { class: ['icon', iconName.value], style: iconStyle.value })
    },
})
